﻿import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.14

Rectangle {

    id: root

    property var test: []
    property string equId: ""
    property string name: ""
    property int type: 0
    property string route: ""
    property int status: 0              // 0: 未连接 1: 已连接 2: 运行中 3: 已完成

    property bool isOperable: true
    property bool isSelectable: false
    property bool isSelected: false

    property bool onHover: false


    signal released()


    height: 133*dp
    width: 280*dp



    MouseArea{
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onEntered: {
            onHover = true
        }onExited: {
            onHover = false
        }onReleased: {
            root.released()
            rootSettingsDevice.checkDevice(equId)

        }
    }
    Rectangle{
        anchors.fill: parent
        layer.enabled: true
        radius: 10*dp
        opacity: 0.1
        layer.effect: DropShadow{
            color: "#172DD6"
            samples: 32
            radius: 10*dp
            spread: 0.13
        }
    }

    Rectangle{
        anchors.fill: parent
        color: (onHover || isSelected) ? "#F2F9FF" : "white"
        radius: 10*dp
        border.color: (onHover || isSelected) ? "#1677FF" : "#EFEFEF"
    }



    Text{   // 设备名称
        id: text_equName
        x:24*dp;  y:24*dp
        text: name
        font.bold: true
        font.pixelSize: config.fontsize+1
        elide: Text.ElideRight
        width: root.width - 100*dp
        height: 20*dp
        MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            cursorShape: Qt.PointingHandCursor
            onReleased: {
                root.released()
                rootSettingsDevice.checkDevice(equId)
            }
            onEntered: {
                onHover = true
                if(text_equName_2.contentWidth > text_equName.width){
                    tooltip_name.visible = true
                }
            }onExited: {
                onHover = false
                tooltip_name.visible = false
            }
        }Text{       // 用于判断文本是否超出显示范围 (嗯，是ChatGPT教我这么干的……)
            id: text_equName_2
            visible: false
            anchors.fill: text_equName
            text: name
            font.bold: true
            font.pixelSize: config.fontsize+1
        }ToolTip{
            id: tooltip_name
            visible: false
            delay: 600
            background: Rectangle{
                color: "#222222"
                radius: 5
            }
            contentItem: Text{
                text: name
                color: "white"
                font.pixelSize: config.fontsize
            }

            opacity: 0.85
        }

        // 触发结束 --------------------------------------
    }


    Text{
        x:24*dp
        y:48*dp
        text: (type===0?"IP地址: ":"COM口: ") + route
        color: "#999999"
        font.pixelSize: config.fontsize-1
    }
    Image{
        x: 224*dp
        y: 16*dp
        height: 34*dp
        width: 34*dp
        source: type===0 ? "qrc:/picture/deviceType_tcp.png" : "qrc:/picture/deviceType_usb.png"
    }

    Rectangle{
        x: 24*dp
        y: 77*dp
        height: 32*dp
        width: 72*dp
        color: status===1 ? "#F0F9EB" : (status===0 ? "#EAEBFC" : (status===2 ? "#F0F9EB" : "#F0F9EB"))
        Text{
            anchors.centerIn: parent
            text: status===1 ? "已连接" : (status===0 ? "未连接" : (status===2 ? "已连接" : "已连接"))
            font.bold: true
            font.pixelSize: config.fontsize-1
            color: status===1 ? "#67C23A" : (status===0 ? "#1677FF" : (status===2 ? "#67C23A" : "#67C23A"))
        }
    }
    Image{
        id: deleteButton
        height: 20*dp
        width: 20*dp
        x: 247*dp
        y: 102*dp
        source: "qrc:/picture/delete.png"
        visible: onHover && isOperable
        MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            onReleased: {
                rootSettingsDevice.deleteDevice(equId)
            }
            cursorShape: Qt.PointingHandCursor
            onEntered: {
                onHover = true
                deleteButton.source = "qrc:/picture/delete_active.png"
            }onExited: {
                onHover = false
                deleteButton.source = "qrc:/picture/delete.png"
            }
        }
    }
    Image{
        id: connectButton
        height: 20*dp
        width: 20*dp
        x: 214*dp
        y: 102*dp
        source: "qrc:/picture/connect.png"
        visible: onHover && isOperable && root.status===0
        MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            onReleased: {
                rootSettingsDevice.connect(equId)
            }
            cursorShape: Qt.PointingHandCursor
            onEntered: {
                onHover = true
                connectButton.source = "qrc:/picture/connect_active.png"
            }onExited: {
                onHover = false
                connectButton.source = "qrc:/picture/connect.png"
            }
        }
    }

}
